<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1
			{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			span  /* 不是块元素*/
			{
				font-size: 90px;
				
			}
			body
			{
				height: 2000px;
			}
			
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				var box1=document.getElementById("box1");
				
				// box1.干嘛就是在box1干嘛才
				box1.onwheel=function(event)   //ie是onmousewheel  火狐是DOMMouseSrcoll该事件需要addEventListener函数来绑定
				{
					var span1=document.getElementById("span1");
					event=event||window.event;
					//alert(event.wheelDelta);  /不看大小只看正负火狐不支持该属性 向下滚是-  这个在火狐是undefined
					//alert(event.detail);  //火狐用来获取  向上滚是-
					if(event.wheelDelta>0 ||event.detail<0)  //解决了兼容问题
					{
						box1.style.height=box1.clientHeight-15+"px";
						
					}
					else
					{
						box1.style.height=box1.clientHeight+15+"px";
						
					}
					//当滚轮条滚动的时候,如果浏览器有滚动条,滚动条会随之滚动
					return false;
					
				}
				bind(box1,"DOMMouseSrcoll",box1.onwheel);
				//使用addEventListener()方法绑定响应函数，取消默认行为不能用return false 使用event来取消
				if(preventDefault)
				{
					event.preventDefault();
				}
				
				function bind(obj,eventStr,callback)
				{
				if(obj.addEventListener)  //解决兼容性问题
				{
					obj.addEventListener(eventStr,callback,false);
				}
				else
				{
					obj.attachEvent("on"+eventStr,function()
					{
						callback.call(obj);   //可以将window变成button
					})
				}
				}
			}
		</script>
	</head>
	<body>
		<div id="box1"><br /><br /><br /><span id="span1">新年快乐</span></div>
	</body>
</html>